'use strict'
import { View, ScrollView } from '../../component'
import style from './css.css'
class Chat extends React.Component {
  static propTypes = {
    chatList: PropTypes.object,
    scrollView: PropTypes.object
  }
  _scrollStart = this._scrollStart.bind(this)
  _scrollEnd = this._scrollEnd.bind(this)
  _getScrollControl = null
  sView = null
  chatListNumber = 0
  _scrollStart (iscroll) {
    if ((iscroll.y < 0 && iscroll.directionY === -1) || (iscroll.y > iscroll.maxScrollY) && iscroll.directionY === 1) {
      this.props.scrollView.disable()
    }
  }
  _scrollEnd (iscroll) { this.props.scrollView.enable() }
  componentDidUpdate () {
    let { chatList } = this.props
    chatList = chatList.slice()
    setTimeout(() => {
      const nowNumber = chatList.length
      if (this.chatListNumber < nowNumber && this.sView && this._getScrollControl) {
        this.chatListNumber = nowNumber
        const y = this.sView.maxScrollY
        if (y < this.sView.y) { this._getScrollControl(Math.abs(y), 200, 1) }
      }
    }, 0)
  }
  _renderText () {
    let { chatList } = this.props
    chatList = chatList.slice()
    return chatList.map((item, index) => {
      return (
        <View className={style.chatItem} key={index}>
          <View className={style.userTalkWhite}>{item}</View>
        </View>
      )
    })
  }
  render () {
    return (
      <ScrollView
        scrollbars={false}
        getIScroll={(res) => { this.sView = res }}
        className={style.chatBox}
        scrollStart = {this._scrollStart}
        scrollEnd = {this._scrollEnd}
        scrollCancel = {this._scrollEnd}
        getScrollControl = {(res) => { this._getScrollControl = res }}
      >
        <View className={ style.chatItemTop }></View>
        {this._renderText()}
      </ScrollView>
    )
  }
}

export default Chat
